<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<!--引入echarts插件-->
	<script type="text/javascript" src="jquery/echarts/echarts.min.js"></script>

	<script src="static/lib/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="static/js/echarts-gl.min.js"></script>
	<script type="text/javascript" src="static/echatrs/echarts.min.js"></script>

	<%--暂时用内部样式 方便测试--%>
	<style>
		#main{
			color: #0da9e5;
		}
		body {
			background-color: rgb(240,242,245);;

		}
		.tab-content {
			padding: 10px;
		}
		/* 仪表盘专用样式 */
		.dashboard {
			padding: 1px;
			background-color: #f8f9fa;
		}

		.small-box {
			height: 200px;
		}

		.dashboard-card {
			padding: 15px;
			margin-bottom: 20px;
			border-radius: 5px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			transition: all 0.3s ease;
		}

		.dashboard .row > .col-md-6 {
			margin-bottom: 15px;
		}

		.dashboard-card:hover {
			box-shadow: 0 2px 6px rgba(0,0,0,0.15);
		}

		.dashboard-value {
			font-size: 30px;
			line-height: 36px;
			padding: 10px 0px 10px;
			overflow: hidden;
			white-space: nowrap;
			word-break: break-all;
			text-overflow: ellipsis;
			color: rgba(0, 0, 0, .85);
		}

		.dashboard-label {
			font-size:14px;
			color: rgba(0,0,0,.45);
			text-transform: uppercase;
		}

		.dashboard-icon {
			float: left;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 50%;
			background-color: #3498db;
			color: white;
			margin-right: 10px;
			font-size: 18px;
		}

		/* 移动端适配 */
		@media (max-width: 767px) {
			.dashboard-card {
				margin-bottom: 15px;
			}

			.dashboard-value {
				font-size: 18px;
			}
		}

		@media (min-width: 992px) {
			.col-md-3 {
				width: 25%;
			}
		}
	</style>
<%--	交易来源分布、销售业绩排行 请求数据--%>
	<script type="text/javascript">
		$(function () {
			//发送销售业绩排行榜查询请求
			$.ajax({
				url:'workbench/main/queryCountOfTranGroupByTotalsales.do',
				type:'post',
				dataType:'json',
				success:function (data) {
					// 基于准备好的 DOM，初始化 echarts 实例
					var myChart = echarts.init(document.getElementById('main'));
					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '员工销售排行榜',
							left: 'center',
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						legend: {},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'value',
							boundaryGap: [0, 0.01]
						},
						yAxis: {
							type: 'category',
							data: data.map(item => item.name),
							axisLabel: {
								interval: 0,
								rotate: 30
							}
						},
						series: [
							{
								// name: '销售总额',
								type: 'bar',
								data: data.map(item => item.value),
								itemStyle: {
									color: function(params) {
										// 根据索引生成渐变色
										const colorList = ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'];
										return colorList[params.dataIndex];
									}
									// color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE']
								}
							}],
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			});
			$.ajax({
				url: 'getTranMoneyAllAndAvg',
				type: 'post',
				dataType: 'json',
				success: function (data) {
					if (data.code === '1') {
						const retData = Array.isArray(data.retData) ? data.retData : [];
						const totalMoney = parseFloat(retData[0]?.total_money ?? 0);
						const avgMoney = parseFloat(retData[0]?.avg_money ?? 0);
						$('#totalMoney').text("¥ " + totalMoney); // 总金额
						$('#dailyAvgMoney').text("¥ " + avgMoney); // 日均金额
					}
				}
			});

			$.ajax({
				url: 'getCustomerVisit',
				type: 'post',
				dataType: 'json',
				success: function (data) {
					if (data.code === '1') {
						const retData = Array.isArray(data.retData) ? data.retData : [];
						const totalVisits = parseFloat(retData[0]?.total_visits ?? 0);
						const tranCount = parseFloat(retData[0]?.tran_count ?? 0);
						$('#totalVisits').text(totalVisits); 	// 总访问
						$('#tranCount').text(tranCount); 	// 有效客户访问
					}
				}
			});

			$.ajax({
				url: 'getCustomerCnvRate',
				type: 'post',
				dataType: 'json',
				success: function (data) {
					if (data.code === '1') {
						const retData = Array.isArray(data.retData) ? data.retData : [];
						const conversionRate = parseFloat(retData[0]?.conversion_rate ?? 0);
						$('#conversionRate').text(conversionRate + "%");
					}
				}
			});

			$.ajax({
				url: 'getOwnerTranNum',
				type: 'post',
				dataType: 'json',
				success: function (data) {
					if (data.code === '1') {
						const retData = Array.isArray(data.retData) ? data.retData : [];

						const loginMarker = retData.find(item => 'userId' in item);
						const currentUserId = loginMarker?.userId || '默认值'; // 处理可能为空的情况

						const validOwners = retData.filter(item => {
							const isLoginItem = 'userId' in item && (!item.userId || item.userId === "");
							const hasValidOwnerId = '负责人ID' in item && item.负责人ID;
							return !isLoginItem && hasValidOwnerId;
						});


						const tarData = validOwners.find(owner =>
								owner.负责人ID === currentUserId
						);

						console.log(tarData.总负责客户数量)
						console.log(tarData.转换交易的数量)

						// 最终渲染（防御性编程）
						$('#CusNum').text(tarData?.总负责客户数量 ?? 0);
						$('#CusNum_tran').text(tarData?.转换交易的数量 ?? 0);
					}
				}
			});

			/*初始化饼状图*/
			var myChartpie = echarts.init(document.getElementById("containerpie"));
			$.ajax({
				url: 'getTranAllSourceOfCount',
				type: 'post',
				dataType: 'json',
				success: function (data) {
					if (data.code === '1') {
						// 动态生成饼图数据
						const seriesData = data.retData.map(item => ({
							value: item.数量,
							name: item.交易来源
						}));

						myChartpie.setOption({
							title: {
								text: '各交易来源分布',
								left: 'center'
							},
							legend: {
								top: 'bottom'
							},
							series: [{
								// name: '交易来源',
								name: '面积模式',
								type: 'pie',
								radius: [30, 140],			// 第一个是空心圆的半径，第二个是饼图的半径
								center: ['50%', '50%'],
								roseType: 'area',
								itemStyle: {
									borderRadius: 4
								},
								data: seriesData,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						});
					}
				}
			})
		});

	</script>

</head>
<body>
	<%--首页页面！！！--%>
	<%--<img src="image/home.png" style="position: relative;top: -10px; left: -10px;"/>--%>

	<%--首页展示主体--%>
	<div>
		<%--一个盒子，避免其他盒子贴边用--%>
		<div class="tab-content"></div>
		<%--第一行：一些简单小数据展示--%>
		<div class="layui-body">
			<!-- 内容主体 -->
			<div class="dashboard">
				<div class="row">
					<!-- 总交易金额 -->
					<div class="col-md-3 col-sm-6">
						<div class="dashboard-card text-center small-box">
							<div class="card-body">
								<p class="dashboard-label" style="text-align: left;">总交易金额</p>
								<p class="dashboard-value">
									<span id="totalMoney" style="font-size: 26px;line-height: 1;">¥&nbsp;0.00</span>
								</p>
							</div>
							<p style="padding: 10px 15px 0px 15px;border-top: 1px solid #f0f0f0;">每单平均交易金额<span id="dailyAvgMoney" style="padding: 0 12px;">¥&nbsp;0.00</span></p>
						</div>
					</div>

					<!--客户访问量-->
					<div class="col-md-3 col-sm-6">
						<div class="dashboard-card text-center small-box">
							<div class="card-body">
								<p class="dashboard-label" style="text-align: left;">客户总访问量</p>
								<p class="dashboard-value">
									<span id="totalVisits" style="font-size: 26px;line-height: 1;">0</span>
								</p>
							</div>
							<p style="padding: 10px 15px 0px 15px;border-top: 1px solid #f0f0f0;">有效客户访问<span id="tranCount" style="padding: 0 12px;">0</span></p>
						</div>
					</div>

					<!--客户转换率-->
					<div class="col-md-3 col-sm-6">
						<div class="dashboard-card text-center small-box">
							<div class="card-body">
								<p class="dashboard-label" style="text-align: left;">客户转换率</p>
								<p class="dashboard-value">
									<span id="conversionRate" style="font-size: 26px;line-height: 1;">0.0%</span>
								</p>
							</div>
							<p style="padding: 10px 15px 0px 15px;border-top: 1px solid #f0f0f0;">
								<span style="padding: 0 12px;">客户转换表示从潜在客户变成产生交易的客户</span></p>
						</div>
					</div>

					<!--登录者对接的客户数量、完成从潜在客户到交易的转换数量-->
					<div class="col-md-3 col-sm-6">
						<div class="dashboard-card text-center small-box">
							<div class="card-body">
								<p class="dashboard-label" style="text-align: left;">您对接的客户数量</p>
								<p class="dashboard-value">
									<span id="CusNum" style="font-size: 26px;line-height: 1;">0</span>
								</p>
							</div>
							<p style="padding: 10px 15px 0px 15px;border-top: 1px solid #f0f0f0;">转换成交易的数量：
								<span id="CusNum_tran" style="padding: 0 12px;">0</span></p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<%--第二行：左边是各负责人的销售业绩排行榜图、右边是产生交易的各来源的饼图，各占一半--%>
		<div class="dashboard">
			<div class="row">
				<!-- 左侧销售业绩排行榜 -->
				<div class="col-md-6">
					<div class="dashboard-card text-center">
						<div class="card-body">
							<div id="chart1" style="height: 500px;">
								<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
								<div id="main" style="height:500px;text-align: center;"></div>
							</div>
						</div>
					</div>
				</div>

				<!-- 右侧交易来源分布 -->
				<div class="col-md-6">
					<div class="dashboard-card text-center">
						<div class="card-body">
							<div id="containerpie" style="height: 500px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<%--第三行：左边占一半的折线图，右边是一些小数据展示--%>
	</div>
</body>
</html>